<template>
  <OtherLoadingVue v-if="isSkeleton"></OtherLoadingVue>
  <div v-else>
    <ClientMenu
      :dataList="dataList"
      v-if="isShow"
      :noticeList="noticeList"
      :historyList="historyList"
    ></ClientMenu>
    <router-view></router-view>
  </div>
</template>

<script setup>
import ClientMenu from '@/components/client/clientMenu.vue'
import request from '@/util/request'
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
import OtherLoadingVue from '@/components/load/OtherLoading.vue'
import { useRouter } from 'vue-router'

const messageList = ref([])
const isSkeleton = ref(true)
const router = useRouter()
const isShow = ref(false)
const dataList = reactive({
  userinfo: null
})
const noticeList = ref([])
const historyList = ref([])

const getNoticeList = () => {
  request
    .get('/user/notice/list')
    .then((res) => {
      console.log('获取成功：', res)
      noticeList.value = res.data
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}

const getHistoryList = () => {
  request
    .get('/user/history/list')
    .then((res) => {
      console.log('获取成功：', res)
      historyList.value = res.data
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}

onMounted(() => {
  const menu = localStorage.getItem('menu')
  if(menu&&menu===null){
    localStorage.setItem("menu",'/umain')
  }
  

  var user = localStorage.getItem('user')
  if (user != null) {
    dataList.userinfo = JSON.parse(user)
  }

  setTimeout(() => {
    isShow.value = true
  }, 500)

  setTimeout(() => {
    isSkeleton.value = false
  }, 1000)

  // let ws = new WebSocket('ws://139.159.176.201:8088/socket/common')
  let ws = new WebSocket('ws://localhost:8088/socket/common')
  // let ws1 = new WebSocket(`ws://139.159.176.201:8088/socket/${dataList.userinfo.id}`)
  let ws1 = new WebSocket(`ws://localhost:8088/socket/${dataList.userinfo.id}`)
  ws.onopen = () => {
    ws.send(`我是普通用户${dataList.userinfo.id}号`)
  }
  ws.onmessage = (message) => {
    console.log('获取通用的消息', message)
    messageList.value.push(message.data)
    var data = message.data
    data = JSON.parse(data)
    ElMessage.warning(data.content)
  }
  ws.onerror = (err) => {
    console.log('错误', err)
  }
  ws.onopen = () => {
    ws.send('我是用户2号')
  }
  ws1.onmessage = (message) => {
    console.log('用户获取私有的消息', message)
    ElNotification.error('抱歉，当前账号由于违反规定，已被封禁')
    localStorage.clear()
    router.push('/ulogin')
  }

  getNoticeList()
  getHistoryList()
})
</script>

<style scoped>
body {
  padding: 0;
  margin: 0;
}
</style>
